import * as _ from 'lodash'

import { generateUniqueId } from '@utils/helpers'

document.addEventListener('DOMContentLoaded', () => {

    console.log('生成唯一id: ' + generateUniqueId());

    // 1
    // (() => {
    //     // 获取所有的学生标签li
    //     const stus = document.querySelectorAll('li')
    //     // 获取秒数显示的dom
    //     const countDownDom = document.querySelector('.countdown') as HTMLDivElement
    //     // 获取开始按钮的dom
    //     const startBtn = document.querySelector('.btn-start') as HTMLButtonElement
    //     // 获取结束按钮的dom
    //     const endBtn = document.querySelector('.btn-end') as HTMLButtonElement
    //     // 定义settimeout唯一值
    //     let setTimeOutId: NodeJS.Timeout
    //     // 定义setIntervalt唯一值
    //     let setIntervalId: NodeJS.Timeout
    //     const initSNum = 10
    //     // 定义显示倒计时的秒数
    //     let sNum = initSNum
    //     countDownDom.innerText = String(sNum)


    //     //时间倒计时
    //     const countDown = () => {
    //         setIntervalId = setInterval(() => {
    //             console.log(sNum);
    //             // 把倒计时的秒数显示到页面上
    //             countDownDom.innerText = String(sNum)
    //             sNum--
    //             // 判断是否小于等于0 清除定时任务
    //             if (sNum <= 0) {
    //                 initClear()
    //             }

    //         }, 1000);
    //     }

    //     class ClassinitClear {
    //         constructor() { }



    //     }

    //     // 清除定时任务 并初始化
    //     function initClear() {
    //         clearInterval(setIntervalId)
    //         clearTimeout(setTimeOutId)

    //         // 初始化
    //         // setTimeOutId = null
    //         // 定义setIntervalt唯一值
    //         // setIntervalId = null
    //         // 定义显示倒计时的秒数
    //         sNum = initSNum
    //         countDownDom.innerText = String(sNum)

    //     }



    //     // 清除 所有学生的 active 类名效果
    //     function clearStuActiveAll() {
    //         stus.forEach(stu => {
    //             stu.classList.remove('active')
    //         });
    //     }

    //     // 随记抽取学生添加选中效果
    //     const setRandomStuAddActive = () => {

    //         clearStuActiveAll()
    //         // 随记获取一名学生对应的索引值
    //         let rand = Math.floor(Math.random() * stus.length)  // 0.234  ~ 20.234234 => 向下取整  0~20
    //         stus[rand].classList.add('active')

    //         setTimeOutId = setTimeout(setRandomStuAddActive, 100);
    //     }

    //     let startBthHandler = () => {
    //         countDown()
    //         setRandomStuAddActive()
    //     }
    //     startBtn.addEventListener('click', _.debounce(startBthHandler, 500))
    //     // document.addEventListener('事件',执行函数)
    //     // 给开始按钮加上 点击事件
    //     // startBtn.addEventListener('click', () => {
    //     //     countDown()
    //     //     setRandomStuAddActive()

    //     // })
    //     // 给结束按钮加上 点击事件
    //     endBtn.addEventListener('click', () => {
    //         initClear()
    //     })



    // })();


    class ClassroomTimer {
        stus
        countDownDom
        startBtn
        endBtn
        static setIntervalId: NodeJS.Timeout;
        static setTimeOutId: NodeJS.Timeout;
        initSNum
        sNum
        constructor() {
            this.stus = document.querySelectorAll('li');
            this.countDownDom = document.querySelector('.countdown') as HTMLDivElement;
            this.startBtn = document.querySelector('.btn-start') as HTMLButtonElement;
            this.endBtn = document.querySelector('.btn-end') as HTMLButtonElement;
            ClassroomTimer.setIntervalId
            ClassroomTimer.setTimeOutId
            this.initSNum = 10;
            this.sNum = this.initSNum;
            this.countDownDom.innerText = String(this.sNum);
        }

        countDown() {
            ClassroomTimer.setIntervalId = setInterval(() => {
                console.log(this.sNum);
                this.countDownDom.innerText = String(this.sNum);
                this.sNum--;
                if (this.sNum <= 0) {
                    this.initClear();
                }
            }, 1000);
        }

        initClear() {
            clearInterval(ClassroomTimer.setIntervalId);
            clearTimeout(ClassroomTimer.setTimeOutId);
            this.sNum = this.initSNum;
            this.countDownDom.innerText = String(this.sNum);
        }

        clearStuActiveAll() {
            this.stus.forEach(stu => {
                stu.classList.remove('active');
            });
        }

        setRandomStuAddActive() {
            this.clearStuActiveAll();
            let rand = Math.floor(Math.random() * this.stus.length);
            this.stus[rand].classList.add('active');
            ClassroomTimer.setTimeOutId = setTimeout(() => this.setRandomStuAddActive(), 100);
        }

        start() {
            this.countDown();
            this.setRandomStuAddActive();
        }

        end() {
            this.initClear();
        }

        init() {
            this.startBtn.addEventListener('click', _.debounce(() => this.start(), 500));
            this.endBtn.addEventListener('click', () => this.end());
        }
    }

    // 使用方法
    (() => {
        const classroomTimer = new ClassroomTimer();
        classroomTimer.init();
    })()


    // 2 //////////////////////////  // ////////////////



    // 2

    // (() => {

    //     // 获取添加成员按钮组对象
    //     const addStuEl = document.querySelectorAll('.addStu')
    //     // console.log(addStuEl);
    //     // 获取删除成员按钮组对象
    //     const closeBtnEl = document.querySelectorAll('.close-btn')
    //     // console.log(closeBtnEl);
    //     // 获取删除组按钮组对象
    //     const delGroupEl = document.querySelectorAll('.delGroup')
    //     // console.log(delGroupEl);



    //     // 向当前组添加组员 params:[事件对象,循环dom的索引值]
    //     function addStuHander(e: any, index: number) {
    //         console.log(`点击了第 ${index + 1} 个元素`);
    //         console.log('当前点击的元素对象是', e.target);
    //         let stuName = prompt('请输入学生姓名')

    //         // 要求:添加dom元素 使用 createElement 和 appendChild 来完成
    //         // 友情提示：有可能用到以下语法
    //         // const snode =  e.target.closest('类名').querySelector('选择器')
    //         // 创建li标签
    //         var e1 = document.createElement('li') as HTMLLIElement;
    //         // 给li内部增加 html代码
    //         e1.innerHTML = `${stuName}<div class="close-btn"><span class="iconfont icon-close"></span>`;
    //         // 给li 标签增加class 
    //         e1.classList.add('stu-item')


    //         // 事件对象

    //         // type：表示事件的类型，例如 "click"、"keydown"、"input" 等。
    //         // console.log(e.type, 'e.type');
    //         let e1q = e1.querySelector('.close-btn') as HTMLElement;
    //         e1q.addEventListener('click', function (e) {
    //             console.log('删除成员');
    //             // 这里可以添加你想要的点击事件处理逻辑


    //             delStuHander(e, index)

    //         });

    //         console.log(e1);
    //         // 获取 当前组下的 ul 元素
    //         const ulEl = e.target.closest('.group').querySelector('ul')
    //         ulEl.appendChild(e1);
    //         // console.log(ulEl);




    //         // children: 属性，返回一个类数组对象，包含父元素的所有子元素。
    //         // 新加dom需要从新添加事件监听

    //     }


    //     // 删除成员（已完善，可以参考）[事件对象,循环dom的索引值]
    //     function delStuHander(e: any, index: number) {
    //         // console.log(`点击了第 ${index + 1} 个元素`);
    //         // console.log('当前点击的元素对象是', e.target);

    //         // 匹配选择器的最近的祖先元素
    //         const snode = e.target.closest('.stu-item');
    //         // 这段代码首先检查 snode 是否存在，如果存在，就调用它的 remove() 方法来移除它。
    //         if (snode) {
    //             snode.remove(); // 使用 remove() 方法移除元素
    //         }
    //     }

    //     // 删除组
    //     function delGroupHander(e: any, index: number) {
    //         console.log(`点击了第 ${index + 1} 个元素`);
    //         console.log('当前点击的元素对象是', e.target);
    //         // 友情提示：和删除成员语法类似

    //         // 匹配选择器的最近的祖先元素
    //         const snode = e.target.closest('.group');
    //         // 这段代码首先检查 snode 是否存在，如果存在，就调用它的 remove() 方法来移除它。
    //         if (snode) {
    //             snode.remove(); // 使用 remove() 方法移除元素
    //         }


    //     }


    //     // 为每个元素添加点击监听器
    //     addStuEl.forEach((item, index) => {
    //         item.addEventListener('click', function (e) {
    //             console.log('添加成员');
    //             // 这里可以添加你想要的点击事件处理逻辑
    //             addStuHander(e, index)

    //         });
    //     });

    //     // 为每个元素添加点击监听器
    //     closeBtnEl.forEach((item, index) => {
    //         item.addEventListener('click', function (e) {
    //             console.log('删除成员');
    //             // 这里可以添加你想要的点击事件处理逻辑


    //             delStuHander(e, index)

    //         });
    //     });

    //     // 为每个元素添加点击监听器
    //     delGroupEl.forEach((item, index) => {
    //         item.addEventListener('click', function (e) {
    //             console.log('删除组');
    //             // 这里可以添加你想要的点击事件处理逻辑
    //             delGroupHander(e, index)

    //         });
    //     });


    //     // 作业：
    //     // 1. 新增添加组操作

    //     const btnAddGroupEl = document.querySelector('.btn-addGroup') as HTMLElement
    //     const stuInEl = document.querySelector('.stu-in') as HTMLElement
    //     btnAddGroupEl.addEventListener('click', (event) => {

    //         let divGroupEl1 = document.createElement('div');
    //         divGroupEl1.classList.add('group')

    //         let h3El1 = document.createElement('h3');
    //         h3El1.textContent = '第N组'

    //         let aEl1 = document.createElement('a');
    //         aEl1.innerHTML = '添加成员'
    //         aEl1.classList.add('addStu')
    //         aEl1.href = 'javascript:void(0)'
    //         aEl1.addEventListener('click', function (e) {
    //             console.log('添加成员');
    //             addStuHander(e, 0)

    //         });

    //         let aEl2 = document.createElement('a');
    //         aEl2.innerHTML = '删除组'
    //         aEl2.classList.add('delGroup')
    //         aEl2.href = 'javascript:void(0)'
    //         aEl2.addEventListener('click', function (e) {
    //             console.log('删除组');
    //             delGroupHander(e, 0)

    //         });

    //         h3El1.appendChild(aEl1)
    //         h3El1.appendChild(aEl2)
    //         divGroupEl1.appendChild(h3El1)
    //         let ulEl1 = document.createElement('ul');
    //         divGroupEl1.appendChild(ulEl1)



    //         stuInEl.appendChild(divGroupEl1)

    //     })

    //     // btnAddGroupEl.addEventListener('click', function () {
    //     //   console.log(this);

    //     // })

    //     // let arr = [1, 2, 4, 5]

    //     // arr.map((item) => {
    //     //   console.log(this);

    //     // })

    //     // arr.map(function (item) {
    //     //   console.log(this);

    //     // }, arr)

    // })();

    class GroupManager {
        stuInEl
        constructor(stuInSelector: any) {
            this.stuInEl = document.querySelector(stuInSelector);
            this.initEvents();
        }

        initEvents() {
            this.addStudentEventListeners();
            this.deleteStudentEventListeners();
            this.deleteGroupEventListeners();
            this.addGroupButtonListener();
        }

        addStudentEventListeners() {
            const addStuEl = document.querySelectorAll('.addStu');
            addStuEl.forEach((item, index) => {
                item.addEventListener('click', (e) => this.addStudentHandler(e, index));
            });
        }

        deleteStudentEventListeners() {
            const closeBtnEl = document.querySelectorAll('.close-btn');
            closeBtnEl.forEach((item, index) => {
                item.addEventListener('click', (e) => this.deleteStudentHandler(e, index));
            });
        }

        deleteGroupEventListeners() {
            const delGroupEl = document.querySelectorAll('.delGroup');
            delGroupEl.forEach((item, index) => {
                item.addEventListener('click', (e) => this.deleteGroupHandler(e, index));
            });
        }

        addGroupButtonListener() {
            const btnAddGroupEl = document.querySelector('.btn-addGroup') as HTMLElement;
            btnAddGroupEl.addEventListener('click', () => this.addGroupHandler());
        }

        addStudentHandler(e: any, index: number) {
            const stuName = prompt('请输入学生姓名');
            if (!stuName) return;

            const ulEl = e.target.closest('.group').querySelector('ul');
            if (!ulEl) return;

            const li = document.createElement('li');
            li.textContent = stuName;
            li.classList.add('stu-item');

            const closeBtn = document.createElement('div');
            closeBtn.classList.add('close-btn');
            closeBtn.innerHTML = '<span class="iconfont icon-close"></span>';

            li.appendChild(closeBtn);

            closeBtn.addEventListener('click', (e) => {
                this.deleteStudentHandler(e, -1); // 使用-1作为特殊值，因为此时index不适用  
            });

            ulEl.appendChild(li);
        }

        deleteStudentHandler(e: any, index: number) {
            const snode = e.target.closest('.stu-item') || e.target.closest('.close-btn').closest('.stu-item');
            if (snode) {
                snode.remove();
            }
        }

        deleteGroupHandler(e: any, index: number) {
            const snode = e.target.closest('.group');
            if (snode) {
                snode.remove();
            }
        }

        addGroupHandler() {
            const divGroup = document.createElement('div');
            divGroup.classList.add('group');

            const h3 = document.createElement('h3');
            h3.textContent = '新组';

            const addStuLink = document.createElement('a');
            addStuLink.textContent = '添加成员';
            addStuLink.classList.add('addStu');
            addStuLink.href = 'javascript:void(0)';
            addStuLink.addEventListener('click', (e) => this.addStudentHandler(e, 0)); // 注意这里的index可能不准确，因为组是新的  

            const delGroupLink = document.createElement('a');
            delGroupLink.textContent = '删除组';
            delGroupLink.classList.add('delGroup');
            delGroupLink.href = 'javascript:void(0)';
            delGroupLink.addEventListener('click', (e) => this.deleteGroupHandler(e, 0)); // 同样，index可能不准确  

            h3.appendChild(addStuLink);
            h3.appendChild(delGroupLink);

            divGroup.appendChild(h3);
            const ul = document.createElement('ul');
            divGroup.appendChild(ul);

            this.stuInEl.appendChild(divGroup);
        }
    }

    // 使用类  
    (() => {
        const groupManager = new GroupManager('.stu-in');
    })();



    //3 ////////////////  // ////////////////

    // 3

    // (() => {

    //     // 2. 鼠标移入到”第一组“，”第二组“ 组标题上的时候， 当前组的所有学生li 背景改为 "#5ea6ee" 字体颜色为白色加粗。
    //     // ()=>{} 
    //     const h3AllEl = document.querySelectorAll('h3')
    //     h3AllEl.forEach(element => {
    //         element.addEventListener('mouseenter', (e) => {
    //             let er = e.target as Element
    //             // let liAll = er.closest('.group').querySelectorAll('li')
    //             let lie = er.closest('.group') as Element
    //             let liAll = lie.querySelectorAll('li')
    //             liAll.forEach(element => {
    //                 element.classList.add('active')
    //             });

    //         })
    //     });

    //     h3AllEl.forEach(element => {
    //         element.addEventListener('mouseleave', (e) => {
    //             let er = e.target as Element
    //             // let liAll = er.closest('.group').querySelectorAll('li')
    //             let lie = er.closest('.group') as Element
    //             let liAll = lie.querySelectorAll('li')
    //             liAll.forEach(element => {
    //                 element.classList.remove('active')
    //             });

    //         })
    //     });


    // })();


    class GroupHighlighter {

        h3AllEl = document.querySelectorAll('h3')
        constructor(selector: any) {
            this.h3AllEl = document.querySelectorAll(selector);
            this.initEvents();
        }

        initEvents() {
            this.h3AllEl.forEach(element => {
                element.addEventListener('mouseenter', this.handleMouseEnter.bind(this, element));
                element.addEventListener('mouseleave', this.handleMouseLeave.bind(this, element));
            });
        }

        handleMouseEnter(element: any) {
            const group = element.closest('.group');
            if (group) {
                const liElements = group.querySelectorAll('li');
                liElements.forEach((li: any) => {
                    li.classList.add('active'); // 假设.active类定义了所需的样式  
                });
            }
        }

        handleMouseLeave(element: any) {
            const group = element.closest('.group');
            if (group) {
                const liElements = group.querySelectorAll('li');
                liElements.forEach((li: any) => {
                    li.classList.remove('active');
                });
            }
        }
    }

    // 使用类  
    (() => {
        const groupHighlighter = new GroupHighlighter('h3'); // 假设所有的h3元素都是目标  
    })();


})

